<template>
  <div>
    <el-row>
      <el-col :span="4">
        <el-button type="primary" round @click="handleAdd">添加角色</el-button>
      </el-col>
    </el-row>
    <!-- 角色列表 -->
    <!--
      element-ui 2.7版本升级了一个新的功能：支持表格树
      当使用表格时，表格组件会自动检查你的数据是否是嵌套数据（树结构），从而自动进行表格树渲染
      它的一句就是你的数据中的子节点名字：children
      如果要渲染成表格树，它需要提供row-key
      解决方案：将数据中的字段children改个名字
     -->
     <el-table
      :data="roles"
      stripe
      border
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-row v-for="first in scope.row.rights" :key="first.id">
            <el-col :span="3">
              <el-tag closable @close="handleDeleteRights(scope.row, first)">{{ first.authName }}</el-tag>
              <i class="el-icon-caret-right"></i>
            </el-col>
            <el-col :span="21">
              <el-row v-for="second in first.children" :key="second.id">
                <el-col :span="3">
                  <el-tag closable type="success" @close="handleDeleteRights(scope.row, second)">{{ second.authName }}</el-tag>
                  <i class="el-icon-caret-right"></i>
                </el-col>
                <el-col :span="21">
                  <el-tag @close="handleDeleteRights(scope.row, third)" closable type="warning" v-for="third in second.children" :key="third.id">{{ third.authName }}</el-tag>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column type="index"></el-table-column>
      <el-table-column
        prop="roleName"
        label="角色名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="roleDesc"
        label="描述"
        width="180">
      </el-table-column>
       <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            title="编辑"
            type="primary"
            icon="el-icon-edit"
            @click="handleEdit(scope.row)"></el-button>
          <el-button
            title="删除"
            type="danger"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"></el-button>
          <el-button
            title="授权角色"
            type="success"
            icon="el-icon-check"
            @click="showEditRights(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加角色对话框 -->
    <RolesAdd ref="rolesAddEl" @add-success="loadRoles"/>
    <!-- 角色授权 -->
    <RoleEditRights ref="roleEditRightsEl" @edit-rights-success="loadRoles"/>
    <!-- 编辑角色 -->
    <RoleEdit ref="roleEditEl" @edit-success="loadRoles"></RoleEdit>
  </div>
</template>
<script>
import { getRoleList, deleteRole, deleteRights } from '@/api/role'
import RolesAdd from './add'
import RoleEditRights from './edit-rights'
import RoleEdit from './edit'
export default {
  name: 'RolesList',
  components: {
    RolesAdd,
    RoleEditRights,
    RoleEdit
  },
  data () {
    return {
      roles: []
    }
  },
  created () {
    this.loadRoles()
  },
  methods: {
    handleEdit (item) {
      this.$refs.roleEditEl.showDialog(item)
    },
    handleDelete (item) {
      this.$confirm('确定要删除吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { id } = item
        const { meta } = await deleteRole(id)
        if (meta.status === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.loadRoles()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async loadRoles () {
      const { data, meta } = await getRoleList()
      if (meta.status === 200) {
        data.forEach(item => {
          item.rights = item.children
          delete item.children
        })
        this.roles = data
      }
    },
    handleAdd () {
      this.$refs.rolesAddEl.showDialog()
    },
    showEditRights (item) {
      this.$refs.roleEditRightsEl.showDialog(item)
    },
    async handleDeleteRights (role, rights) {
      const { data, meta } = await deleteRights(role.id, rights.id)
      if (meta.status === 200) {
        role.children = data
      }
    }
  }
}
</script>
<style scoped>
.el-table {
  margin-top: 15px;
}
.el-row {
  margin-bottom: 5px;
}
.el-tag {
  margin-right: 2px;
}
</style>
